import React from 'react'
import './index.css'
import { NavLink, Navigate } from 'react-router-dom'
 
// 创建组件
class Hello extends React.Component {

  // 推荐使用props作为constructor的参数！！
  constructor(props) {
    super(props)
    console.log(props)
  }

  state = {
    txt: '',
    count: 0
  }
  
  // 提供修改状态的方法
  onIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  handleChange = e => {
    this.setState({
      txt: e.target.value
    })
  }

  render() {
    return (
      <div>
        这是我的第一个抽离到js文件中的组件: inputVal:{this.state.txt}
        <br/>
        <input type="text" value={this.state.txt} onChange={this.handleChange} />
        <br/>
        <h1>props: {this.props.count}</h1>
        <div className="parentChild">
          <Child1 count={this.state.count} />
          <Child2 onIncrement={this.onIncrement} />
        </div>
        <h1>React路由基础</h1>
        <NavLink to="/comment">点击跳转到评论页面</NavLink> 
      </div>
    )
  }
}


const Child1 = props => {
  return <h1>计数器：{props.count}</h1>
}

const Child2 = props => {
  return <button onClick={() => props.onIncrement()}>+1</button>
} 
// 导出组件
export default Hello